<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />

		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />
		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面css -->
		
		
		<link rel="stylesheet" href="../domainName/css/out.css" />
		
		
		<link rel="stylesheet" href="./css/analysis.css" />
		
		<style type="text/css">
			.table .el-input__suffix {
				display: flex;
				align-items: center;
			}
			
			.analyTableButton-wrapper > span{
				display: inline-block;
				cursor: pointer;
			}
			
			.analyTableButton-wrapper  .deep {
				color: #6462F3;
			}
			.analyTableButton-wrapper .error {
				color: #F21C30;
			}
			
			.analyTableButton-wrapper .normal,.analyTableButton-wrapper .error {
				margin-left: 30px;
			}
			
			.demo-ruleForm .el-form-item {
				display: flex;
				margin-bottom: 0px;
			}
			
			.demo-ruleForm .el-form-item__error {
				  top: 43px;
			}
			
			.yzButton.noClick {
				background: #8987FF;
				    color: #FFFFFF;
				    cursor: default;
				    opacity: 0.8;
				}
			
			
		</style>
		
		
	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="orderList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span @click="handleClickGotoHomePage" class="nav-item">总览</span>
					<span class="nav-item noClick">我的钱包</span>
					<span class="nav-item">优惠券</span>
				</div>
				<div class="form-wrapper">
					<div class="from-title-wrapper">
						<span class="from-title">
							<!-- <i @click="returnCurrentPage" class="icon el-icon-back"></i> -->
							优惠券
						</span>
					</div>
					
					<ul class="notice-wrapper">
						<li class="notice-item">1，每个优惠券都有使用规则说明，按照使用规则说明使用 </li>
						<li class="notice-item">2，优惠券只能抵扣支付金额，不能用于兑换现金和其他用途 </li>
						<li class="notice-item">3，请在使用期限内使用优惠券，超过使用期限将作废</li>	
						<li class="notice-item">4，当使用优惠券的订单发生退款时，优惠券抵扣的金额将不予退还</li>
					</ul>
					<section class="button-wrapper  fboxRow">
						<li :class="{'active':item.val === activeTicketType}" v-for="(item,index) in ticketTypeArr" :key="item.val" @click="changeTicketInfoStatus(item)" class="yzButton num">
							{{item.label}}（{{item.num}}）
						</li>
					</section>
					

					<el-table class="table" empty-text ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
						<el-table-column label="优惠类型" 
						width="auto">
							<template slot-scope="scope">
								{{scope.row.discountsType}}
							</template>
						</el-table-column>
						
						<el-table-column label="优惠名称" width="auto">
							<template slot-scope="scope">
								<span v-if="!isOverText(scope.row.discountsName)">{{scope.row.discountsName}}</span>
								<el-popover width="205" placement="top" trigger="hover" v-else>
									<div class="popover-content">
										{{scope.row.discountsName}}
									</div>
									
									<div slot="reference">
										<p class="nowrapShowpointer w100">{{scope.row.discountsName}}</p>
									</div>
								</el-popover>
								
							</template>
						</el-table-column>
						
						<el-table-column label="适用场景" width="120">
							<template slot-scope="scope">
								{{scope.row.applicableScene}}
							</template>
						</el-table-column>
						
						<el-table-column label="适用产品" width="auto">
							<template slot-scope="scope">
								
								<span v-if="!isOverText(scope.row.applicableProduct)">{{scope.row.applicableProduct}}</span>
								<el-popover width="205" placement="top" trigger="hover" v-else>
									<div class="popover-content">
										{{scope.row.applicableProduct}}
									</div>
									
									<div slot="reference">
										<p class="nowrapShowpointer w100">{{scope.row.applicableProduct}}</p>
									</div>
								</el-popover>
							</template>
						</el-table-column>
						
						
						
						<el-table-column label="生效时间/失效时间" width="auto">
							<template slot-scope="scope">
								{{scope.row.beginTime}} 至 {{scope.row.outTime}}
							</template>
						</el-table-column>




						<el-table-column width="120" label="状态">
							<template  slot-scope="scope">
								<div v-html="handlestatus(scope.row)"></div>
							</template>
						</el-table-column>
						
						
						
						<el-table-column width="auto" label="操作">
							<template slot-scope="scope">
								<div @click="handleClickoperation(scope.row)" v-html="handleoperation(scope.row)"></div>
							</template>
						</el-table-column>


					</el-table>
					<div class="pagination-wrapper">
						<div class="total-wrapper">
							<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :total="pageInfo.totalSize">
						</el-pagination>
					</div>
					
					<el-dialog style="box-sizing: border-box;" width="940px" class="yz-el-dialog" :visible.sync="userecordDialogVisble">
						<div slot="title" class="dialog-title">
							使用记录
						</div>
						<div class="dialog-content">
							<div  class="mb-20">
								{{activeTableRow.discountsType}}  ({{activeTableRow.discountsName}})
							</div>
							<el-table :data="[userecordForm]" style="width: 100%;margin-top: 10px;margin-bottom: 50px;">
								<el-table-column prop="useProduct" label="使用产品" width="auto">
								</el-table-column>
								<el-table-column prop="indentId" label="订单号" width="auto">
								</el-table-column>
								<el-table-column prop="useTime" label="使用时间" width="auto">
								</el-table-column>
								<el-table-column prop="salePrice" label="优惠金额(元)" width="auto">
								</el-table-column>
								<el-table-column prop="payPrice" label="付款金额(元)" width="auto">
								</el-table-column>
							</el-table>
					
							<div class="dialog-button-wrapper fboxRow">
								<div @click="userecordDialogVisble = false" class="yzButton  confirm">确认</div>
								<div @click="userecordDialogVisble = false" class="yzButton cancelButton">取消</div>
							</div>
						</div>
					</el-dialog>
				</div>
			</div>


		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.orderList-wrapper',
				data: function() {
					return {
						// 使用记录信息
						userecordForm: {
							useProduct:undefined, // 使用产品
							indentId:undefined, // 订单
							useTime: undefined, // 使用时间
							salePrice:undefined, // 优惠金额
							payPrice: undefined // 付款金额
						},
						ticketTypeArr:[{   // 优惠券类型数组
							label:'全部',
							val: 'all',
							num: 26
						},{
							label:'待使用',
							val: 'waitUse',
							num: 10
						},{
							label:'已使用',
							val: 'alreadyUse',
							num: 0
						},{
							label:'已过期',
							val: 'alreadyTimeout',
							num: 16
						}],
						activeTicketType: 'all', // 选中的优惠券类型  默认为全部
						userecordDialogVisble: false,  //使用记录 dialog
						activeTableRow:{
							
						},  // 选中table 的行
						// 表格数据
						tableData: [
							{
								discountsType: '满减券', // 优惠类型
								discountsName:'减至固定金额12400元22222222211111', // 优惠名称
								applicableScene:'全部', //适用场景：全部，新购，续费，升级
								applicableProduct:'测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试',//适用产品;全产品通用，具体的产品
								beginTime: '2021-03-09', // 生效时间
								outTime:'2021-09-08', // 失效时间
								status:'waitUse' ,// 状态
								purchType: 'new' // 购买状态  new 新购；renew 续费； upgrade 升级
							},{
								discountsType: '满减券', // 优惠类型
								discountsName:'减至固定金额12400元', // 优惠名称
								applicableScene:'全部', //适用场景：全部，新购，续费，升级
								applicableProduct:'适用产品',//适用产品;全产品通用，具体的产品
								beginTime: '2021-03-09', // 生效时间
								outTime:'2021-09-08', // 失效时间
								status:'waitUse' ,// 状态
								purchType: 'new' // 购买状态  new 新购；renew 续费； upgrade 升级
							},{
								discountsType: '满减券', // 优惠类型
								discountsName:'减至固定金额12400元', // 优惠名称
								applicableScene:'全部', //适用场景：全部，新购，续费，升级
								applicableProduct:'适用产品',//适用产品;全产品通用，具体的产品
								beginTime: '2021-03-09', // 生效时间
								outTime:'2021-09-08', // 失效时间
								status:'alreadyUse' ,// 状态
								purchType: 'new' // 购买状态  new 新购；renew 续费； upgrade 升级
							},{
								discountsType: '满减券', // 优惠类型
								discountsName:'减至固定金额12400元', // 优惠名称
								applicableScene:'全部', //适用场景：全部，新购，续费，升级
								applicableProduct:'适用产品',//适用产品;全产品通用，具体的产品
								beginTime: '2021-03-09', // 生效时间
								outTime:'2021-09-08', // 失效时间
								status:'alreadyTimeout',// 状态
								purchType: 'new' // 购买状态  new 新购；renew 续费； upgrade 升级
							}
						],


						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 41
						},
						pageOptions: [{
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],


					}
				},

				methods: {
					// 是否字段超长   需pop 显示
					isOverText:  function(text) {
						// 大于18个字符  就视为字段超长
						if(text.length > 18) {
							return true
						}else {
							return false
						}
					},
					
					// 切换优惠券类型
					changeTicketInfoStatus:function(item) {
						console.log('准备切换到'+ item.label)
						// 这里 获得需要切换的数据后  再改变高亮的优惠券类型
						this.activeTicketType = item.val
					},
					//处理状态
					handlestatus: function(row) {
						// 状态  待使用  waitUse; 已使用  alreadyUse;  已过期  alreadyTimeout;
						switch (row.status) {
							case 'waitUse':
								return '<span style="color:#3FBF70">待使用</span>'
							case 'alreadyUse':
								return '<span style="color:#6462F3">已使用</span>'
							case 'alreadyTimeout':
								return '<span style="color:#333333">已过期</span>'
							default:
								break;
						}
					},
					// 处理操作
					handleoperation:function(row) {
						// 状态  待使用  waitUse; 已使用  alreadyUse;  已过期  alreadyTimeout;
						switch (row.status) {
							case 'waitUse':
								return '<span style="color:#6462F3;cursor:pointer">去使用</span>'
							case 'alreadyUse':
								return '<span style="color:#6462F3;cursor:pointer">使用记录</span>'
							case 'alreadyTimeout':
								return '<span style="color:#FF4949;cursor:pointer">删除</span>'
							default:
								break;
						}
					},
					// 点击操作按钮
					handleClickoperation:function(row) {
						if(row.status === 'waitUse') {
							// 点击去使用
							// 如果是新购，跳转到首页，如果是续费，跳转到续费管理页，如果是升级，跳转到后台总览页
							
						}else if(row.status === 'alreadyUse') {
							// 点击使用记录
							
							// 模拟获取服务器数据
							this.userecordForm = {
								useProduct: '云服务器',
								indentId:'HTY201585713551236',
								useTime:'2021-03-09',
								salePrice: 1000,
								payPrice:97160
							}
							this.activeTableRow = row
							this.userecordDialogVisble = true
							
						}else if(row.status === 'alreadyTimeout') { 
							// 点击删除
							// 删除成功后  显示
							this.$message.info('已删除优惠卷')
						}
					},
					
					
					// 返回到上一页面
					returnCurrentPage:_throttle(function() {
						returnCurrentPage()
					}),

					// 跳转到首页的方法
					handleClickGotoHomePage: function() {
						gotohomePage()
					},



					handleSizeChange: function(e) {
						console.log(e)
					},
					handleCurrentChange: function(val) {
						console.log('当前页为xxxxx')
					},
				},
				mounted: function() {
					
				}

			})
		</script>
	</body>
</html>
